<template>
	<view>
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 私车公用任务
				</view>
			</view>
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form
						class="from-card"
						labelPosition="left"
						labelWidth="80"
						:model="info"
						:rules="rules"
						ref="form1">
							<u-form-item label="报销人" prop="userName" required>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.userName"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
								label="里程照片"
								prop="images"
								required
								borderBottom
								ref="images">
								<u-upload
									:fileList="images"
									@afterRead="afterRead($event,'images')"
									@delete="deletePic($event,'images')"
									maxCount="3">
								</u-upload>
							</u-form-item>
							<u-form-item labelWidth="100" label="总里程(km)" prop="mileage" required borderBottom>
								<u--input
								v-model="info.mileage"
								placeholder="请输入"
								type="digit"
								inputAlign="right"
								border="none"
								@change="mileageChange"
								></u--input>
							</u-form-item>
							<u-form-item labelWidth="100" label="报销金额(元)" prop="amount" required borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.amount"
								placeholder="系统计算..."
								type="digit"
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item>
							<u-form-item
							label="任务日期"
							prop="time"
							required
							@click="dateShow = true;dateField = 'time'">
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								placeholder="请选择"
								v-model="info.time"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item label="任务内容" prop="content" required>
								<u--textarea
								v-model="info.content"
								placeholder="请输入内容" >
								</u--textarea>
							</u-form-item>
							<!-- <u-form-item label="加油地点" prop="cfPlace" required>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.cfPlace"
								placeholder="正在定位中..."
								inputAlign="right"
								border="none"
								></u--input>
							</u-form-item> -->
						</u--form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 流程
				</view>
			</view>
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<view class="card-body-steps">
							<u-steps :current="stepCurrent" dot direction="column">
								<u-steps-item title="审批人" :desc="desc1"></u-steps-item>
								<u-steps-item title="抄送人" :desc="desc2"></u-steps-item>
							</u-steps>
						</view>
						<view class="card-plus">
							<view class="card-plus-t user-t" style="">
								<view class="card-plus-f plus-style"
									@click="gotoPage('/subPackTask/work/cy/scgy/choose?type='+'审批人')">
									<uni-text class="span-style">
										<span>*</span>
									</uni-text>
									<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
								</view>
								<view class="pers-list" v-if="userList.length<=1">
									<view class="per-list" v-for='(it,i) in userList' :key='i'>
										<view class="pers-pic">
											<u-avatar :text="it.userName.slice(1)"
												:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
												bgColor="#0087FC">
											</u-avatar>
											<view class="pers-close" style="" @click="closeUser(it)">
												<u-icon name="close" color="#ffffff" size="1rpx"
													customStyle="line-height: 20rpx;" bold></u-icon>
											</view>
										</view>
										<text class="pers-name">{{it.userName}}</text>
										<view class="pers-icon">
											<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
								</view>
								<view class="pers-list" v-else>
									<view class="per-list per-all"
										@click="gotoPage('/subPackTask/work/cy/scgy/addMore?type='+'审批人'+'&userList='+encodeURIComponent(JSON.stringify(userList)))">
										<view class="pers-pic">
											<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
												<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
											</u-avatar>
										</view>
										<text class="pers-name all-users">查看全部</text>
										<view class="pers-icon">
											<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
									<view class="per-list" v-for='(it,i) in userList.slice(-2)' :key='i'>
										<view class="pers-pic">
											<u-avatar :text="it.userName.slice(1)"
												:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
												bgColor="#0087FC">
											</u-avatar>
											<view class="pers-close" style="" @click="closeUser(it,i)">
												<u-icon name="close" color="#ffffff" size="1rpx"
													customStyle="line-height: 20rpx;" bold></u-icon>
											</view>
										</view>
										<text class="pers-name">{{it.userName}}</text>
										<view class="pers-icon">
											<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
								</view>
							</view>
							<view class="card-plus-t cc-t">
								<view class="card-plus-s plus-style"
									@click="gotoPage('/subPackTask/work/cy/scgy/choose?type='+'抄送人')">
									<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
								</view>
								<view class="pers-list" v-if="ccList.length<=1">
									<view class="per-list" v-for='(it,i) in ccList' :key='i'>
										<view class="pers-pic">
											<u-avatar :text="it.userName.slice(1)"
												:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
												bgColor="#0087FC">
											</u-avatar>
											<view class="pers-close" style="" @click="closeCc(it)">
												<u-icon name="close" color="#ffffff" size="1rpx"
													customStyle="line-height: 20rpx;" bold></u-icon>
											</view>
										</view>
										<text class="pers-name">{{it.userName}}</text>
										<view class="pers-icon">
											<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
								</view>
								<view class="pers-list" v-else>
									<view class="per-list per-all"
										@click="gotoPage('/subPackTask/work/cy/scgy/addMore?type='+'抄送人'+'&ccList='+encodeURIComponent(JSON.stringify(ccList)))">
										<view class="pers-pic">
											<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
												<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
											</u-avatar>
										</view>
										<text class="pers-name all-users">查看全部</text>
										<view class="pers-icon">
											<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
									<view class="per-list" v-for='(it,i) in ccList.slice(-2)' :key='i'>
										<view class="pers-pic">
											<u-avatar :text="it.userName.slice(1)"
												:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
												bgColor="#0087FC">
											</u-avatar>
											<view class="pers-close" style="" @click="closeCc(it, i)">
												<u-icon name="close" color="#ffffff" size="1rpx"
													customStyle="line-height: 20rpx;" bold></u-icon>
											</view>
										</view>
										<text class="pers-name">{{it.userName}}</text>
										<view class="pers-icon">
											<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-button">
			<view class="submit-block" @click="submit()">
				保存
			</view>
		</view>
		
		<u-picker
			:immediateChange="true"
			:show="pickShow"
			:columns="columns"
			@confirm="confirmPick"
			keyName="name"
			@cancel="pickShow = false">
		</u-picker>
		
		<!-- <u-datetime-picker
			:show="dateShow"
			v-model="dateValue"
			@cancel="dateShow = false"
			@confirm="confirmDate"
			mode="date">
		</u-datetime-picker> -->
		
		<u-calendar
			:show="dateShow"
			:maxDate="String(new Date())"
			:minDate="minDate"
			monthNum="7"
			:closeOnClickOverlay="true"
			@close="dateShow = false"
			@confirm="confirmDate">
		</u-calendar>
	</view>
</template>

<script>
	import { add } from '@/api/privatecar.js'
	import { uploadFile,removeByOssId } from '@/api/upload'
	export default {
		data() {
			return {
				minDate: new Date() - 6 * 30 * 24 * 60 * 60 * 1000,
				userList: [],
				ccList: [],
				images: [],
				timer: null, //定时器
				info: {
					mileage: '',
					images: '',
					time: '',
					amount: '',
					content: '',
				},
				rules: {
					'images': [{
							type: 'string',
							required: true,
							message: '请上传里程照片',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return value.split(',').length == 3;
							},
							message: '里程照片必须上传3张照片'
						},
					],
					'mileage': {
						type: 'number',
						required: true,
						message: '请填写里程',
						trigger: ['blur', 'change']
					},
					'time': {
						type: 'string',
						required: true,
						message: '请选择任务日期',
						trigger: ['blur', 'change']
					},
					'content': {
						type: 'string',
						required: true,
						message: '请填写任务内容',
						trigger: ['blur', 'change']
					},
				},
				pickShow: false,
				columns: [],
				pickField: '',
				pickFieldName: '',
				dateShow: false,
				dateField: '',
				stepCurrent: -1,
				desc1: '请选择审批人',
				desc2: '请选择抄送人',
				t: '',
			}
		},
		onLoad() {
			let loginInfo = uni.getStorageSync("loginInfo")
			this.info.userName = loginInfo.user.userName
			// this.getAddress()
			// this.pers = JSON.parse(decodeURIComponent(option.pers))
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
		onShow() {
			// clearInterval(this.timer)
			// this.timer = setInterval(()=>{
			//     this.getAddress();
			// },30000);
			let pages = getCurrentPages();
			if (pages[pages.length - 1].$vm.t) {
				this.t = pages[pages.length - 1].$vm.t
			}
		},
		onUnload(){
		    // clearInterval(this.timer)
		},
		methods: {
			setUsers(e) {
				this.userList = e
				/* if (this.t == 'choose') {
					this.userList.forEach(its => {
						e.forEach(eIts => {
							if (its.userId == eIts.userId) {
								let getLocation = e.indexOf(eIts);
								e.splice(getLocation, 1)
							}
						})
					})
					this.userList = this.userList.concat(e)
				} else if (this.t == 'add-more') {
					this.userList = e
				}
				this.desc1 = this.userList.length + "人依次审批" */
				// if(this.userList!=""){
				// 	this.stepCurrent=0;
				// }
			},
			setCc(e) {
				this.ccList = e
				/* if (this.t == 'choose') {
					this.ccList.forEach(its => {
						e.forEach(eIts => {
							if (its.userId == eIts.userId) {
								let getLocation = e.indexOf(eIts);
								e.splice(getLocation, 1)
							}
						})
					})
					this.ccList = this.ccList.concat(e)
				} else if (this.t == 'add-more') {
					this.ccList = e
				}
				this.desc2 = "抄送" + this.ccList.length + "人" */
			},
			getAddress() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					isHighAccuracy:true,
			        success:(res) => {
			            // this.address = res.address.city+'·'+res.address.district+res.address.street+res.address.streetNum+res.address.poiName;
						this.info.cfPlace = res.address.city+res.address.district+res.address.poiName;
			        }
			    });
			},
			async addData(){
				const { data } = await add(this.info);
				if(data.code == 200){
					uni.showToast({ title: '提交成功', icon: 'none' })
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			submit(){
				this.info.images = this.images.map(e=>e.url).join(',')
				this.$refs.form1.validate().then(res => {
					this.addData()
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
				})
			},
			radioChange(){
				
			},
			confirmPick(e){
				this.pickShow = false
				this.info[this.pickField] = e.value[0].id
				this.info[this.pickFieldName] = e.value[0].name
			},
			confirmDate(e){
				this.info[this.dateField] = e[0]
				this.dateShow = false
			},
			mileageChange(value){
				this.info.amount = (value * 1.2).toFixed(1)
			},
			// 删除图片后事件
			async deletePic(e,name) {
				let ossIds = []
				ossIds.push(this[name][e.index].ossId)
				const result = await removeByOssId(ossIds);
				this[name].splice(e.index, 1)
			},
			// 读取图片后事件
			async afterRead(e,name) {
				const result = await uploadFile(e.file.url)
				this[name].push(result)
			},
			closeUser(it) {
				this.userList.forEach(its => {
					if (its.userId == it.userId) {
						let getLocation = this.userList.indexOf(it);
						this.userList.splice(getLocation, 1)
						this.desc1 = this.userList.length + "人依次审批"
					}
				})
			},
			closeCc(it) {
				this.ccList.forEach(its => {
					if (its.userId == it.userId) {
						let getLocation = this.ccList.indexOf(it);
						this.ccList.splice(getLocation, 1)
						this.desc2 = "抄送" + this.ccList.length + "人"
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
		color: #333333;
	}

	.submit {
		background-color: #0081FF;
		color: #f6f6f6;
		height: 100rpx;
		text-align: center;
	}

	.card-body-steps {
		display: inline-block;
	}

	.card-plus {
		display: inline-block;
		float: right;
		margin: 0 10rpx;
	}

	.plus-style {
		border: 1rpx solid #ededed;
		padding: 15rpx;
		margin-bottom: 40rpx;
		position: relative;
		height: 45rpx;
		border-radius: 15rpx;
	}

	.span-style {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		color: red;
		font-size: 50rpx;
		width: 20rpx;
		height: 20rpx;
		line-height: 35rpx;
		text-align: center;
	}

	.u-text__value {
		color: white !important;
	}


	.pers-list {
		display: flex;
		flex-direction: row;
		justify-content: right;
	}

	.per-list {
		margin-right: 50rpx;
	}



	.pers-pic {
		height: 65rpx;
	}

	.card-plus-t {
		display: flex;
		flex-direction: row-reverse;
		justify-content: right;
		text-align: center;

	}

	.user-t {
		margin: 15rpx 0 40rpx 0;
	}

	.cc-t {
		margin: 40rpx 0 15rpx 0;
	}

	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
		width: 50rpx;
	}

	.pers-close {
		background-color: rgb(198, 199, 203);
		width: 18rpx;
		height: 18rpx;
		border-radius: 18rpx;
		padding: 5rpx;
		position: absolute;
		margin-top: -80rpx;
		margin-left: 55rpx;

	}


	.pers-icon {
		position: relative;
		top: -80rpx;
		left: 88rpx;
		width: 26rpx;
	}

	.all-users {
		left: -10%;
		position: relative;
	}

	.per-all {
		margin-right: 22rpx;
	}
</style>
<style>
	.u-steps-item--column {
		margin: 30rpx 0;
		padding: 10rpx 0;
	}

	::v-deep .u-steps-item__line--column {
		height: 180rpx !important;
		background-color: #cdcdcd !important;
	}

	::v-deep .u-text__value--content {
		color: #131313;
		font-size: 33rpx !important;
	}

	::v-deep .u-steps-item__wrapper__dot {
		background-color: #cdcdcd !important;
	}
</style>
